import React from 'react'
import './index.css'

import { nanoid } from 'nanoid'

export default function Header({ todoList, setTodoList }) {

  const publishIptEvevt = (e) => {
    if (e.keyCode !== 13) return
    const iptValue = e.target.value.trim()
    if (!iptValue) return alert('请输入正确的事件！！！')
    const todoObj = {
      id: nanoid(),
      todo: iptValue,
      done: false
    }
    setTodoList([todoObj, ...todoList])
    e.target.value = ''
  }

  return (
    <div className="todo-header">
      <input type="text" onKeyUp={publishIptEvevt} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
